<template>
  <div id='tabelList'>
    <el-row :gutter="10">
      <el-form ref="form" :model="queryParams" :rules="rules" label-width="80px">
        <el-col :span="20" :offset="0">
          <el-form-item label="接收时间" prop="receiveDate">
            <el-select v-model="queryParams.receiveDate" clearable placeholder="请选择接受时间">
              <el-option v-for="item in this.dict.type.sys_select_date" :key="item.value"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预警时间" prop="warningDate">
            <el-select v-model="queryParams.warningDate" clearable placeholder="请选择预警时间">
              <el-option v-for="item in this.dict.type.sys_select_date" :key="item.value"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="0">
          <el-form-item>
            <el-button  icon="el-icon-search" size="mini" @click="handleQuery">搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-table v-loading="loading" height="500" :data="dataList" border>
      <el-table-column label="版本号" show-overflow-tooltip align="center" prop="version" />
      <el-table-column label="信息ID" show-overflow-tooltip align="center" prop="eqrId" />
      <el-table-column label="发布单位" show-overflow-tooltip align="center" prop="sender" />
      <el-table-column label="签发时间" show-overflow-tooltip align="center" prop="sendTime" />
      <el-table-column label="地震事件状态" show-overflow-tooltip align="center" prop="status" />
      <el-table-column label="确认类型" show-overflow-tooltip align="center" prop="msgTypeLabel" />
      <el-table-column label="发震时间" width="150" show-overflow-tooltip align="center" prop="oriTime" />
      <el-table-column label="震中地名" show-overflow-tooltip align="center" prop="locName" />
      <el-table-column label="经度" width="150" show-overflow-tooltip align="center" prop="epiLon">
        <template slot-scope="scope">
          <span>{{scope.row.epiLon !== null ? scope.row.epiLon + '°' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="纬度" width="150" show-overflow-tooltip align="center" prop="epiLat">
        <template slot-scope="scope">
          <span>{{scope.row.epiLat !== null ? scope.row.epiLat + '°' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="深度" show-overflow-tooltip align="center" prop="focDep">
        <template slot-scope="scope">
          <span>{{scope.row.focDep !== null ? scope.row.focDep + 'km' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="震级" show-overflow-tooltip align="center" prop="magnitude" />
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>
<script>
import { getDataList } from '@/api/earlyWarning/earlyWarning';
export default {
  name: 'quickReport',
  components: {},
  props: {
    type: { type: String, default: '' },
  },
  dicts: ['sys_select_date'],
  data() {
    return {
      form: {},
      rules: {},
      loading: true,
      dataList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        key: null,
        receiveDate: '7',
        warningDate: null,
      },
    };
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {
    this.getList();
  },
  beforeCreate() {},
  beforeMount() {},
  methods: {
    async getList() {
      this.queryParams.key = this.type;
      let res = await getDataList(this.queryParams);
      if (res.code == 200) {
        this.dataList = res.rows;
        this.total = res.total;
        this.loading = false;
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('form');
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>
<style lang='scss' scoped>
#tabelList {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  // padding-top: 20px;
  ::v-deep .el-form-item {
    display: inline-block;
  }
}
</style>